<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ueditor图片对话框</title>
    <script type="text/javascript" src="../internal.js"></script>
    <script src="/static/layui/layui.js"></script>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
<!--    &lt;!&ndash; jquery &ndash;&gt;-->
<!--    <script type="text/javascript" src="../../third-party/jquery-1.10.2.min.js"></script>-->

<!--    &lt;!&ndash; webuploader &ndash;&gt;-->
<!--    <script src="../../third-party/webuploader/webuploader.min.js"></script>-->
<!--    <link rel="stylesheet" type="text/css" href="../../third-party/webuploader/webuploader.css">-->

<!--    &lt;!&ndash; image dialog &ndash;&gt;-->
<!--    <link rel="stylesheet" href="image.css" type="text/css" />-->
    <style>
        #demo2 {justify-content: space-between;flex-direction: row;flex-wrap: wrap;}
        #demo2 .layui-upload-img {width: 100%;height: 110px;}
        #demo2 li {position: relative;width: 18%;display: inline-flex;justify-content: center;align-items: center;margin: 8px 1%;border: 3px solid #3694fa;box-sizing: border-box;}
        #demo2 li .success {display: block;position: absolute;left: 0;bottom: 0;height: 40px;width: 100%;z-index: 200;background: url(./images/success.png) no-repeat right bottom;}
        .album {}
        .album .layui-side {top:51px;width: 95px}
        .album .layui-side .item {width: 100%;height: 30px;line-height: 30px;text-align: center;border-bottom: 1px solid #ddd;cursor: pointer;}
        .layui-side-scroll {width:95px;border-right: 1px solid #ddd;-ms-overflow-style: none;overflow: -moz-scrollbars-none; }
        .layui-side-scroll::-webkit-scrollbar { width: 0 !important }
        .album .layui-side .item.on {background: #ff5500;color: #fff;}
        .album .layui-body {left: 95px;}
        .imageList {flex-direction: row;flex-wrap: wrap;display: flex;}
        .imageList .item {width: 98px;height: 98px;box-sizing:border-box;position: relative;margin:0 10px 5px 0;}
        .imageList .item:hover {border: 2px solid #1094fa;}
        .imageList .item img {width: 100%;height: 100%;}
        .imageList .item .icon {cursor: pointer;width: 98px;height: 98px;position: absolute;top: 0;left: 0;z-index: 2;border: 0;background-repeat: no-repeat;}
        .imageList .item.active .icon {background-image: url(./images/success.png);background-position: 57px 57px;}
        .review img {object-fit: cover;width: 100%;}
        .albumlist {}
        .albumlist .item {display: inline-block;vertical-align: middle;width: 127px;height: 105px;line-height: 25px;padding: 20px 0;margin-right: -1px;margin-bottom: -1px;border: 1px solid #e2e2e2;font-size: 14px;text-align: center;color: #666;transition: all .3s;-webkit-transition: all .3s;}
        .guanlilist {-ms-overflow-style: none;overflow: -moz-scrollbars-none;max-height: 340px;overflow-y: scroll;}
        .guanlilist::-webkit-scrollbar { width: 0 !important }
        .guanlilist .item {display: inline-block;width: 120px;height: 45px;line-height: 45px;position: relative;border: 1px solid #ddd;border-radius: 4px;overflow: hidden;margin-right: 4px;}
        .guanlilist .item p {text-align: center;margin-left: -20px;}
        .guanlilist .item span {position: absolute;right: 5px;top: 14px;border: 1px solid #ddd;height: 16px;width: 16px;line-height: 15px;text-align: center;border-radius: 50%;cursor: pointer;}
        .guanli .add {width: 125px;height: 45px;line-height: 45px;text-align: center;border:1px solid #ddd;border-radius: 10px;background: #1E9FFF;color: #fff;position: fixed;right: 20px;bottom: 20px;cursor: pointer;}

    </style>
</head>
<body>
<div class="layui-tab layui-tab-brief" lay-filter="tab">
    <ul class="layui-tab-title">
        <li class="layui-this">上传图片</li>
        <li>本地图库</li>
        <li>网络图片</li>
        <li>添加相册</li>
    </ul>
    <div class="layui-tab-content" style="height: 100px;">
        <div class="layui-tab-item layui-show">
            <div class="layui-upload layui-form" lay-filter="album">
                <div class="layui-form-item">
                    <button type="button" class="layui-btn" id="test2">选择文件</button>
                    <div class="layui-inline" style="float:right;">
                        <label class="layui-form-label">选择相册</label>
                        <div class="layui-input-inline">
                            <select name="album" lay-filter="相册"></select>
                        </div>
                    </div>
                </div>
                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                    预览图：
                    <ul class="layui-upload-list" id="demo2"></ul>
                </blockquote>
                <button class="layui-btn" id="upload">上传</button>
            </div>
        </div>
        <div class="layui-tab-item album">
            <div class="layui-side">
                <div class="layui-side-scroll">
                    <ul class="list"></ul>
                </div>
            </div>
            <div class="layui-body" style="top: 55px;">
                <ul class="imageList"></ul>
                <div id="test1"></div>
            </div>
        </div>
        <div class="layui-tab-item remote">
            <form class="layui-form" action="" lay-filter="remote">
                <div class="layui-form-item">
                    <label class="layui-form-label">图片地址</label>
                    <div class="layui-input-block">
                        <input type="text" id="remoteUrl" name="src" autocomplete="off" placeholder="请输入网址" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item" style="position: relative">
                    <div class="layui-inline">
                        <label class="layui-form-label">大小:宽度</label>
                        <div class="layui-input-inline" style="width: 100px;">
                            <input type="text" name="width" class="layui-input">
                        </div>
                        <div class="layui-form-mid">高度</div>
                        <div class="layui-input-inline" style="width: 100px;">
                            <input type="text" name="height" class="layui-input">
                        </div>
                    </div>
                    <div class="review" style="position: absolute;right:30px;top:60px;width: 160px;height: 160px;background: #eee;">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">边框</label>
                        <div class="layui-input-inline">
                            <input type="tel" name="border" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">边距</label>
                        <div class="layui-input-inline">
                            <input type="tel" name="vspace" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">描述</label>
                        <div class="layui-input-inline">
                            <input type="tel" name="alt" class="layui-input">
                        </div>
                    </div>
                </div>
            </form>

        </div>
        <div class="layui-tab-item guanli">
            <div class="guanlilist"></div>
            <div class="add">新增相册</div>
        </div>
    </div>
</div>
<script>
    var type,list=[],album_id,tab_index = 0,baseUrl="http://yongming.xxryjsapi.top",addAlbumUrl = "http://yongming.xxryjsapi.top"
    layui.use(['element','upload','jquery','form','laypage','layer'],function(){
        var element = layui.element,upload = layui.upload,$ = layui.jquery,form = layui.form,laypage = layui.laypage,layer = layui.layer
        initButtons();
        //相册相关
        getAlbum()
        upload.render({
            elem: '#test2',
            url: baseUrl + '/system/upload', //改成您自己的上传接口
            multiple: true,
            auto:false,
            data:{album_id:function(){
                    return $("select[name='album']").val();
                }},
            bindAction:"#upload",
            choose: function(obj){
                obj.preview(function(index, file, result){
                    var img = new Image();
                    img.src = result;
                    img.onload = function () { //初始化夹在完成后获取上传图片宽高，判断限制上传图片的大小。
                        var height = img.height;
                        var width = img.width;
                        $('#demo2').append(`<li id="id${index}" data-width="${width}" data-height="${height}"><img src=${result} alt=${file.name} class="layui-upload-img"></li>`)
                    }
                });
            },
            done: function(res, index, upload){
                $("#id"+index).append(`<span class="success"></span>`)
                list.push(res.file)
            }
        });
        element.on('tab(tab)', function(data){
            tab_index = data.index
            list = []
            switch (tab_index) {
                case 0:
                    break;
                case 1:
                    //打开图片列表
                    getPicList()
                    break;
                case 2:
                    //上传远程图片
                    break;
                case 3:

                    break;
            }
        });
        $(".album .layui-side .list").on('click',".item",function () {
            $(".album .layui-side .list .item").removeClass('on')
            $(this).addClass('on')
            // console.log(123)
            getPicList(1,20)
        })
        $(".imageList").on('click','.item',function(){
            $(this).toggleClass('active')
            let src = $(this).find('img').attr('src')
            let flag = false
            for(let i in list){
                if(list[i].src == src){
                    flag = true
                    list.splice(i)
                }
            }
            if(!flag){
                list.push({src})
            }
        })
        $("#remoteUrl").blur(function(){
            var url = $(this).val()
            if(!url) return false;
            $(".review").empty().append(`<img src="${url}">`)
        })
        $(".guanlilist").on('click','.del',function(){
            var id = $(this).data('id')
            var _this = this
            layer.confirm('真的要删除这个相册吗?删除后该相册内的所有文件也将被删除!!!',function(index){
                $.get(baseUrl + '/system/delAlbum?id='+id,res=>{
                    layer.msg(res.msg)
                    if(res.code == 200){
                        $(_this).parent().remove()
                    }
                    layer.close(index)
                })
            },function(){})
        })
        $(".guanli .add").click(function(){
            layer.prompt({
                formType: 0,
                title: '相册名',
            },function(val,index){
                $.ajax({
                    url:baseUrl + '/system/addAlbum',
                    data:{name:val},
                    type:'post',
                    success:res=>{
                        if(res){
                            let txt = `<div class="item"><p>${val}</p><span class="del" data-id="${res}">x</span></div>`
                            $(".guanlilist").append(txt)
                        }else{
                            layer.msg('新增失败')
                        }
                        layer.close(index)
                    }
                })
            })
        })
        function layuipage(obj){
            laypage.render({
                elem: 'test1',
                count: obj.total,
                limit:obj.per_page,
                curr:obj.current_page,
                jump:(obj2,curr)=>{
                    if(!curr){
                        getPicList(obj2.curr,obj2.limit)
                    }
                }
            });
        }
        function getPicList(page=1,limit=20){
            var album_id = $(".layui-side-scroll .list .item.on").data('id')
            $.ajax({
                url:baseUrl + '/system/getPicList',
                data:{page,limit,album_id},
                type:'post',
                success:res=>{
                    if(res.total != 0){
                        let txt = ''
                        for(let v of res.data){
                            txt += `<li class="item"><img src="${v.src}"><span class="icon"></span></li>`
                        }
                        $(".imageList").empty().append(txt)
                        layuipage(res)
                    }else{
                        $(".imageList").empty()
                        $("#test1").html('<p style="text-align: center;">没有找到内容哦~~~~</p>')
                    }

                }
            })
        }
        function getAlbum(){
            $.get(baseUrl + '/system/getAlbum',(res)=>{
                let txt = '' //上传图片右边的选择相册
                let txt2 = '' // 本地图库的相册列表渲染
                let txt3 = '' // 相册列表渲染
                for(let v of res){
                    txt += `<option value="${v.id}">${v.album_name}</option>`
                    txt2 += `<li class="item" data-id="${v.id}">${v.album_name}</li>`
                    txt3 += `<div class="item"><p>${v.album_name}</p><span class="del" data-id="${v.id}">x</span></div>`
                }
                $("select[name='album']").append(txt)
                $(".album .layui-side .list").empty().append(txt2)
                $(".guanlilist").append(txt3)
                $(".album .layui-side .list .item").eq(0).addClass('on')
                album_id = res[0].id
                form.render('select');
            })
        }
        function initButtons() {
            dialog.onok = function () {
                if(tab_index == 2){
                    var obj2 = form.val("remote")
                    list.push(obj2)
                }
                if(list) {
                    editor.execCommand('insertimage', list);
                    // remote && editor.fireEvent("catchRemoteImage"); //如果是远程图片的话就抓取远程图片,没什么意思,不写了
                }
            };
        }
    })




</script>
</body>
</html>
